<template>
	<view style="background-image: linear-gradient(#d9f0ed, #e8f4f2);height: 380rpx;padding-top: 150rpx;position: relative;">
		<view
			class=""
			style="position: absolute;
		left: 38rpx;
		top: 100rpx;"
			@click="goback"
		>
			<image src="../../static/left.png" mode="" style="width: 35rpx;height: 35rpx;"></image>
			<text
				style="position: absolute;
		left: 50rpx;
		top: -4rpx; display: inline-block;width: 200rpx;font-size: 32rpx;"
			>
				医院搜索
			</text>
		</view>

		<u-search
			inputAlign="left"
			height="30"
			bgColor="#fff"
			v-model="searchtext"
			placeholder="请输入医院名称"
			:showAction="false"
			margin="20rpx 30rpx 0 30rpx"
			@blur="search"
		></u-search>
		<view v-for="(item, index) in hospitalList" :key="index" class="Bottombar" @click="LookHospitalDetail(item)">
			<view class="Bottompuper"><image :src="baseUrl + item.cover_img" mode="" class="bottomnp"></image></view>
			<view class="Bottomworde">
				<view class="Bottom_onew">{{ item.name }}</view>
				<view class="diswods">
					<view class="S_display">{{ item.rank }}</view>
					<view class="A_display">{{ item.type }}</view>
					<view class="N_display">{{ item.nature }}</view>
				</view>
				<!-- <view class="D_display">重点科室：{{ item.key_department }}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hospitalList: [],
			searchtext: '',
			baseUrl:''
		};
	},
	onShow() {
		console.log(123);
		this.getHospitalList();
		this.baseUrl=this.https
	},
	onLoad() {
		console.log(456);
	},
	methods: {
		// 获取指定地区的医院信息
		getHospitalList() {
			this.post('/api/Zrecduzp/huoquzhidingchengshiyiyuanliebiao', {
				city_id: 1513,
				page: 1
			}).then(res => {
				this.hospitalList = this.hospitalList.concat(res.data);
				// 分页
				this.last_page = res.last_page;
			});
		},
		goback() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			console.log(routes.length);
			if (routes.length <= 1) {
				this.gotoPage('/pages/index/index');
			} else {
				uni.navigateBack();
			}
		},
		search() {
			this.get('/api/Zrecduzp/hospitalList', { search: this.searchtext, limit: 10 }).then(res => {
				this.hospitalList = res.data;
			});
		},
		LookHospitalDetail(item) {
			uni.setStorageSync('hospital', item);
			uni.navigateTo({
				url: '/pages/HomePage/hospitalDetail/hospitalDetail?id=' + item.id
			});
		}
	}
};
</script>

<style>
.Bottombar {
	border-radius: 30rpx;
	padding: 20rpx;
	background-color: #ffffff;
	width: 686rpx;
	margin-left: 30rpx;
	margin-top: 30rpx;
	box-sizing: border-box;
	// margin-bottom: 30rpx;
	display: flex;
	box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}

.bottomnp {
	width: 180rpx;
	height: 180rpx;
}

.Bottomworde {
	margin-left: 30rpx;
	margin-top: 20rpx;
}

.Bottom_onew {
	font-size: 35rpx;
	font-weight: 900;
	margin-bottom: 10rpx;
	color: #424f5e;
}

.diswods {
	display: flex;
}

.S_display {
	background-color: #80d5d8;
	color: #ffffff;
	font-size: 25rpx;
	border-radius: 20rpx;
	width: 90rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	margin: 10rpx 10rpx 10rpx 0rpx;
	font-weight: 900;
}

.A_display {
	color: #fec345;
	height: 40rpx;
	line-height: 40rpx;
	margin: 10rpx;
	font-size: 28rpx;
}

.N_display {
	color: #00d4d7;
	height: 40rpx;
	line-height: 40rpx;
	margin: 10rpx;
	font-size: 28rpx;
}

/* 底部栏 */
.D_display {
	width: 340rpx;
	height: 50rpx;
	line-height: 50rpx;
	word-break: break-all;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 28rpx;
	color: #424f5e;
}
</style>
